<script setup>import {h} from "vue";
import { NIcon } from "naive-ui";
import { RouterLink } from "vue-router";
import { LayersOutline, RecordingOutline,CodeSlash,LibraryOutline} from "@vicons/ionicons5";
import Info from "../components/Info.vue";

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const menuOptions = [
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name: "auto"
          },
        },
        { default: () => "自动化" }
    ),
    key: "auto",
    icon: renderIcon(LayersOutline)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name:"event"
          }
        },
        { default: () => "事件" }
    ),
    key: "event",
    icon: renderIcon(RecordingOutline)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name:"codeEdit"
          }
        },
        { default: () => "编程" }
    ),
    key: "codeEdit",
    icon: renderIcon(CodeSlash)
  },
  {
    label: () => h(
        RouterLink,
        {
          to: {
            name:"pullData"
          }
        },
        { default: () => "数据提交" }
    ),
    key: "pullData",
    icon: renderIcon(LibraryOutline)
  }
];
</script>

<template >
      <Info />
      <div class="con" style="height: 500px;background-color: #FFF">
        <div class="menu">
          <n-menu class="no-drag" :options="menuOptions" />
        </div>
        <div class="container">
          <RouterView />
        </div>
<!--  <n-collapse  display-directive="show">-->
<!--    <n-collapse-item class="no-drag" >-->
<!--      <n-card title="卡片">-->
<!--        卡片内容-->
<!--      </n-card>-->


<!--      <n-collapse>-->
<!--        <n-collapse-item title="常亮" name="1">-->
<!--          <div>通过</div>-->
<!--        </n-collapse-item>-->
<!--        <n-collapse-item title="闪烁" name="2">-->
<!--          <div>快速通过</div>-->
<!--        </n-collapse-item>-->
<!--      </n-collapse>-->
<!--    </n-collapse-item>-->
<!--    <n-collapse-item title="红灯" name="2">-->
<!--      <div>停</div>-->
<!--    </n-collapse-item>-->
<!--  </n-collapse>-->
  </div>
</template>

<style scoped>
.con {
  width: 1000px;
  height: 500px;
  display: grid;
  grid-template-columns: 0.8fr 4fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "menu container";
  box-sizing: border-box;
  overflow: hidden;
}

.menu {
  grid-area: menu;
  background-color: #c5cedb;
  border-radius: 10px 0 0 10px;
}

.container {
  grid-area: container;
  height: 500px;
  overflow: auto;
  border-radius: 0 10px 10px 0;
  padding: 10px;
  box-sizing: border-box;
}
</style>
